<template>
	<div :id="echId" style="pointer-events: all;"></div>
</template>

<script>
/*
echId: echart图dom的id，必须保证整个项目内的次id不会重复
echData: echart图的数据，必须有的label（标题）和value（数据）
unit: 数据的单位
*/
export default {
	props: {
		echId: {
			type: String
		},
		echData: {
			type: Array,
			default: () => {
				return [];
			}
		},
		unit: {
			type: String,
			default: '个'
		}
	},
	computed: {
		labelArr() {
			var arr = [];
			for (var i = 0; i < this.echData.length; i++) {
				arr.push(this.echData[i].label);
			}
			return arr;
		},
		dataArr() {
			var arr = [];
			for (var i = 0; i < this.echData.length; i++) {
				arr.push(this.echData[i].value);
			}
			return arr;
		}
	},
	data() {
		return {
			jishiqi1: null
		};
	},
	watch: {
		echId: {
			handler(val) {
				if (val !== null && val !== undefined && val !== '') {
					setTimeout(() => {
						this.init();
					}, 50);
				}
			},
			immediate: true
		}
	},
	methods: {
		init() {
			var myChart = this.$echarts.init(document.getElementById(this.echId));
			var option = {
				tooltip: {
					trigger: 'axis',
					axisPointer: {
						// 坐标轴指示器，坐标轴触发有效
						type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
					},
					formatter: function(params) {
						return '';
					}
				},
				lineStyle: {
					color: 'rgba(36, 182, 255, 0.7)'
				},
				grid: {
					top: '30px',
					left: '35px',
					right: '25px',
					bottom: '23px'
				},
				xAxis: {
					type: 'category',
					boundaryGap: false,
					data: this.labelArr,
					splitNumber: 3,
					splitLine: {
						show: false
					},
					axisLine: {
						show: false
					},
					axisTick: {
						show: false
					},
					axisLabel: {
						show: true,
						textStyle: {
							//数值样式
							color: '#04e1fb'
						}
					}
				},
				yAxis: {
					minInterval: 1,
					splitLine: {
						show: false
					},
					axisLine: {
						show: false
					},
					axisTick: {
						show: false
					},
					axisLabel: {
						show: true,
						textStyle: {
							//数值样式
							color: '#04e1fb'
						},
						formatter: e => {
							if (e === 0) {
								return '';
							} else {
								return e;
							}
						}
					}
				},
				series: [
					{
						data: this.dataArr,
						type: 'line',
						smooth: true,
						itemStyle: {
							normal: {
								color: '#24B6FF'
							}
						},
						label: {
							//正常情况下的地图颜色和边框颜色
							normal: {
								show: false
							},
							//高亮情况下的
							emphasis: {
								show: true,
								formatter: '{c} ' + this.unit
							},
							position: 'top'
						},
						areaStyle: {
							normal: {
								color: new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [
									{
										offset: 0,
										color: 'rgba(36, 182, 255, 0.9)'
									},
									{
										offset: 1,
										color: 'rgba(36, 182, 255, 0)'
									}
								])
							}
						}
					}
				]
			};
			myChart.setOption(option);
			this.jishiqi(myChart, option);
		},
		jishiqi(myChart, option) {
			let index = 1;
			var masLength = option.series.length > 0 ? option.series[0].data.length : 0;
			myChart.dispatchAction({
				type: 'highlight',
				seriesIndex: 0,
				dataIndex: 0
			});

			this.jishiqi1 = setInterval(() => {
				for (var i = 0; i < masLength; i++) {
					myChart.dispatchAction({
						type: 'downplay',
						seriesIndex: 0,
						dataIndex: i
					});
				}

				myChart.dispatchAction({
					type: 'highlight',
					seriesIndex: 0,
					dataIndex: index
				});
				if (index < masLength - 1) {
					index++;
				} else {
					index = 0;
				}
			}, 2000);
			document.getElementById(this.echId).addEventListener('mouseover', () => {
				for (var i = 0; i < masLength; i++) {
					myChart.dispatchAction({
						type: 'downplay',
						seriesIndex: 0,
						dataIndex: i
					});
				}
				clearInterval(this.jishiqi1);
				this.jishiqi1 = null;
			});
			document.getElementById(this.echId).addEventListener('mouseout', () => {
				this.jishiqi1 = setInterval(() => {
					for (var i = 0; i < masLength; i++) {
						myChart.dispatchAction({
							type: 'downplay',
							seriesIndex: 0,
							dataIndex: i
						});
					}

					myChart.dispatchAction({
						type: 'highlight',
						seriesIndex: 0,
						dataIndex: index
					});
					if (index < masLength - 1) {
						index++;
					} else {
						index = 0;
					}
				}, 2000);
			});
		}
	}
};
</script>

<style></style>
